<template>
  <div>
    <el-table
      border
      :data="tableData"
      ref="singleTable"
      @row-click="treerowclick"
      :stripe="true"
      :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
      :row-style="{height:'5px'}"
      :cell-style="{padding:'5px 0'}"
      tooltip-effect="light"
      highlight-currentidth-row
      highlight-current-row
      :height="table_height"
    >
      <el-table-column
        :prop="firstColumn.prop"
        :label="firstColumn.name"
        :width="firstColumn.width"
      >
        <template slot-scope="scope">
          <div style="cursor: pointer;">
            <template v-if="scope.row.children && scope.row.children.length > 0">
              <i
                class="el-icon-caret-bottom"
                @click="treeClick(scope.row,scope.$index)"
                :style="'margin-left:'+(scope.row.level-1)*2+'em;'"
                v-if="scope.row.open"
              ></i>
              <i
                class="el-icon-caret-right"
                @click="treeClick(scope.row,scope.$index)"
                :style="'margin-left:'+(scope.row.level-1)*2+'em;'"
                v-else
              ></i>
              <span>{{ scope.row.name }}</span>
            </template>
            <span v-else :style="'margin-left:'+(scope.row.level-1)*2+'em;'">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      style: Array
    },
    table_height: {
      style: String
    },

    //属性有: 1.prop 2.width 3.name
    firstColumn: {
      style: Object
    }
  },

  created() {
    this.Refresh();
    window.console.log("treetable componted created");
  },
  methods: {
    treerowclick(row) {
      this.$emit("rowclick", row);
    },
    treeClick(item, index) {
      if (item.open) {
        this.collapse(item, index);
      } else {
        this.expand(item, index);
      }
    },
    expand(item, index) {
      if (!item.children) {
        return index;
      }
      //展开
      for (var i = 0; item.children && i < item.children.length; i++) {
        var child = item.children[i];
        this.tableData.splice(++index, 0, child);
        if (child.children && child.children.length > 0 && child.open) {
          index = this.expand(child, index);
        }
      }
      item.open = true;
      return index;
    },
    collapse(item, index) {
      if (!item.children) {
        return index;
      }
      //收缩
      item.open = false;
      var len = 0;
      for (var i = index + 1; i <= this.tableData.length - 1; i++) {
        var xcode = this.tableData[i].xcode;
        if (xcode.startsWith(item.xcode + "-")) {
          len++;
        } else {
          break;
        }
      }
      this.tableData.splice(index + 1, len);
    },
    Refresh() {
      let util = {};
      util.treeTableXcode = function(data, xcode) {
        xcode = xcode || "";
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          item.xcode = xcode + i;
          if (item.children && item.children.length > 0) {
            util.treeTableXcode(item.children, item.xcode + "-");
          }
        }
      };
      util.treeTableXcode(this.tableData);
      for (let i = 0; i < this.tableData.length; i++) {
        if (
          this.tableData[i].children &&
          this.tableData[i].children.length > 0
        ) {
          this.treeClick(this.tableData[i], i);
        }
      }
    }
  }
};
</script>

<style>
</style>